<template>
  <div>
    <el-form :model="listData" ref="listData" label-width="80px" class="demo-ruleForm">
      <!--<el-form ref="form" :model="form" label-width="80px">-->
      <!--==========================================================================================-->
      {{listData}}
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">1/7</el-col>
        <el-col :span="4">基本信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="姓名">
            <el-input v-model="listData[0].name" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="性别" prop="sex">
            <el-input v-model="listData[0].sex" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="listData.phone" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="listData.nationality" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker type="date" placeholder="" v-model="listData.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="联系电话" prop="phone">
            <el-input placeholder="" v-model="listData[0].phone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="证件号码" prop="number">
            <el-input placeholder="" v-model="form.number" class="input-with-select">
              <el-select v-model="value" slot="prepend" placeholder="" style="width: 90px">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="通行证" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div class="box">
        <el-form-item label="">
          <el-switch
            v-model="value1"
            active-text="此手机号是否关智助教育APP学生版">
          </el-switch>
        </el-form-item>
      </div>
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">2/7</el-col>
        <el-col :span="4">家庭信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="家长姓名">
            <el-input v-model="form.FatherName" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="家长称谓">
            <el-input v-model="form.DaD"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="联系电话">
            <el-input placeholder="" v-model="form.FatherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div class="box">
        <el-form-item label="">
          <el-switch
            v-model="value1"
            active-text="此手机号是否关智助教育APP学生版">
          </el-switch>
        </el-form-item>
      </div>
      <!--<el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="2" style="color: darkgoldenrod;">2/7</el-col>
        <el-col :span="4">家庭信息</el-col>
      </el-row>
      &lt;!&ndash;==========================================================================================&ndash;&gt;
      <el-row>
        <el-col :span="5">
          <el-form-item label="家长姓名">
            <el-input v-model="form.FatherName" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="家长称谓">
            <el-input v-model="form.DaD"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系电话">
            <el-input placeholder="" v-model="form.FatherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">

        </el-col>
      </el-row>-->
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="家长姓名">
            <el-input v-model="form.MotherName" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="家长称谓">
            <el-input v-model="form.MoM"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="联系电话">
            <el-input placeholder="" v-model="form.MotherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div class="box">
        <el-form-item label="">
          <el-switch
            v-model="value1"
            active-text="此手机号是否关智助教育APP学生版">
          </el-switch>
        </el-form-item>
      </div>
      <div class="box">
        <div class="box_content">
          <div style="text-align: center">
            <el-button type="info">添加联系人</el-button>
          </div>
        </div>
      </div>
      <!--<el-row>
        <el-col :span="5">
          <el-form-item label="家长姓名">
            <el-input v-model="form.MotherName" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="家长称谓">
            <el-input v-model="form.MoM"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系电话">
            <el-input placeholder="" v-model="form.MotherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <div style="text-align: center">
            <el-button type="info">添加联系人</el-button>
          </div>
        </el-col>
      </el-row>-->
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">3/7</el-col>
        <el-col :span="4">在校信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="在读学期">
            <el-select class="select" v-model="listData[0].semester" placeholder="">
              <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="在校年级">
            <el-select class="select" v-model="SelectGrade" placeholder="">
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="在读课程">
            <el-select class="select" v-model="listData[0].course" placeholder="">
              <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="所属校区">
            <el-select class="select" v-model="listData[0].school" placeholder="">
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="招生来源">
            <el-select class="select" v-model="listData[0].address" placeholder="">
              <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="推荐人">
            <el-input v-model="form.recommend" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="班主任">
            <el-input v-model="listData.teacher" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="授课老师">
            <el-select class="select" v-model="listData.teacher2" placeholder="">
              <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="主跟进人">
            <el-input v-model="listData[0].teacher" placeholder=""></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="副跟进人">
            <el-select class="select" v-model="listData[0].teacher2" placeholder="">
              <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          <div class="block" style="text-align: center">
            <span>意向度</span><el-rate></el-rate>
          </div>
        </div>
      </div>
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">4/7</el-col>
        <el-col :span="4">订单信息</el-col>
      </el-row>
      <div class="box">
        <div class="box_content3">
          订单编号：ZZEDU1234567890
        </div>
        <div class="box_content3">
          交易编号：真实收据/银联交易单号/微信交易号/支付宝交易号
        </div>
        <div class="box_content3">
          交易时间：2020-10-03 10:10:10
        </div>
      </div>
      <div class="box">
        <div class="box_content3">
          购买内容：：2020年冬季 国际朗文课程
        </div>
        <div class="box_content3">
          开课时间：2020-10-10 上课时间：一、二、三、四、 五、六
        </div>
        <div class="box_content3">
          支付类型：订金 支付金额：1000
        </div>
      </div>
      <hr/>
      <div class="box">
        <div class="box_content3">
          订单编号：ZZEDU0987654321
        </div>
        <div class="box_content3">
          交易编号：真实收据/银联交易单号/微信交易号/支付宝交易号
        </div>
        <div class="box_content3">
          交易时间：2020-10-13 10:10:10
        </div>
      </div>
      <div class="box">
        <div class="box_content3">
          购买内容：2020年冬季 国际朗文课程
        </div>
        <div class="box_content3">
          开课时间：2020-10-10 上课时间：一、二、三、四、 五、六
        </div>
        <div class="box_content3">
          支付类型：学费 支付金额：1000
        </div>
      </div>
      <div class="box">
        <div class="box_content3">
          <div style="margin-left: 75px">2020年冬季 国际朗文课程 教材</div>
        </div>
        <div class="box_content3">
          购买数量：1 套
        </div>
        <div class="box_content3">
          支付类型：学费 支付金额：100
        </div>
      </div>
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">5/7</el-col>
        <el-col :span="4">学业信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读学校">
            <el-select class="select" v-model="listData.school" placeholder="">
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="form.Chinese"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="form.Math"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="form.English"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="form.Physics"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="form.Chemistry"></el-input>
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读年级">
            <el-select class="select" v-model="SelectGradeing" placeholder="">
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="form.History"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="form.Geography"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="form.Politics"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="form.Biology"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="form.Technology"></el-input>
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">6/7</el-col>
        <el-col :span="4">学业信息</el-col>
      </el-row>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="考试日期">
            <el-select class="select" v-model="listData.school" placeholder="">
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="form.Chinese"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="form.Math"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="form.English"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="form.Physics"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="form.Chemistry"></el-input>
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="考试类型">
            <el-select class="select" v-model="SelectGradeing" placeholder="">
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="form.History"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="form.Geography"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="form.Politics"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="form.Biology"></el-input>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="form.Technology"></el-input>
          </el-form-item>
        </div>
      </div>
      <!--<el-row>
        <el-col :span="4">
          <el-form-item label="曾读年级">
            <el-select class="select" v-model="SelectGradeing" placeholder="">
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="历史">
            <el-input v-model="form.History"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="地理">
            <el-input v-model="form.Geography"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="政治">
            <el-input v-model="form.Politics"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="生物">
            <el-input v-model="form.Biology"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="信息科技">
            <el-input v-model="form.Technology"></el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!--==========================================================================================-->
      <el-row style="margin-bottom: 20px;font-size: 20px">
        <el-col :span="1" style="color: darkgoldenrod;">7/7</el-col>
        <el-col :span="4">在校成绩</el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="4">
          <el-form-item label="户籍地址" prop="province">
            <el-cascader
              ref="cascaderCity"
              :value="cityArr"
              style="width: 300px"
              :placeholder="placeholder"
              v-model="form.province"
              :options="options"
              :props="{
              value: 'name',
              label: 'name',
              ...props
              }"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址" prop="DetailedAddress">
            <el-input v-model="form.DetailedAddress" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="" v-model="form.textarea" maxlength="1000" show-word-limit></el-input>
        </el-form-item>
      </el-row>
      <!--==========================================================================================-->
      <!--==========================================================================================-->
    </el-form>
    <!--==========================================================================================-->
  </div>
</template>

<script>
  import addressData from '@/components/CascaderCity/addressData.json'
  export default {
    name: 'SelectStudent',
    data(){
      return{
        value1: true,
        /*弹出框属性*/
        NewStudentFile:false,
        /*城市级联*/
        cityArr: [],
        options: [],
        isChange: false,
        form: {
          name: '', /*姓名*/
          sex: '',  /*性别*/
          nation: '', /*民族*/
          nationality: '',  /*国籍*/
          birthday: '', /*出生年月日*/
          phone: '',  /*联系电话*/
          number:'',  /*身份证号码*/
          recommend: '',  /*推荐人*/
          teacher: '',  /*主跟进人*/
          DaD: '爸爸',  /*父亲称谓*/
          MoM: '妈妈',  /*母亲称谓*/
          FatherName: '', /*父亲名字*/
          MotherName: '', /*母亲名字*/
          FatherPhone: '',  /*爸爸电话*/
          MotherPhone: '',  /*妈妈电话*/
          Chinese: '',  /*语文*/
          Math: '', /*数学*/
          English: '',  /*英语*/
          Physics: '',  /*物理*/
          Chemistry: '',  /*化学*/
          History: '',  /*历史*/
          Geography: '',  /*地理*/
          Politics: '', /*政治*/
          Biology: '',  /*生物*/
          Technology: '', /*信息科技*/
          DetailedAddress: '',  /*详细地址*/
          textarea: '',  /*备注*/
          SelectTeacher: '',
          province: []
        },
        SelectSemester: '',
        SelectGrade: '',
        SelectCourse: '',
        SelectSchool: '',
        SelectTeacher: '',
        SelectChannel: '',
        SelectTeacher2: '',
        SelectSchooling: '',
        SelectGradeing: '',
        province: [],
        city: '',
        area: '',
        /*学期*/
        semester: [{
          value: '选项1',
          label: '第一学期'
        }, {
          value: '选项2',
          label: '第二学期'
        }],
        /*曾读学校*/
        school: [{
          value: '选项1',
          label: '一小'
        }, {
          value: '选项2',
          label: '二小'
        }],
        /*招生来源*/
        channel: [{
          value: '选项1',
          label: '网上'
        }, {
          value: '选项2',
          label: '专台'
        }],
        /*年级*/
        grade: [{
          value: '选项1',
          label: '一年级'
        }, {
          value: '选项2',
          label: '二年级'
        }],
        /*课程*/
        course: [{
          value: '选项1',
          label: '语文'
        }, {
          value: '选项2',
          label: '英语'
        }, {
          value: '选项2',
          label: '数学'
        }],
        /*副跟进人*/
        teacher2: [{
          value: '选项1',
          label: '陈老师'
        }, {
          value: '选项2',
          label: '李老师'
        }]
      }
    },
    /*城市级联*/
    props: {
      listData: {
        type: Array,
        default: () => []
      },
      /**
       * 默认区域传入格式:
       * 非多选(props.multiple = false): 北京市/北京市/东城区
       * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
       */
      value: {
        type: String,
        default: ''
      },
      /**
       * 默认是regionData
       * regionData(省市区) provinceAndCityData(省市)
       */
      optionType: {
        type: String,
        default: 'regionData',
        validator: function(value) {
          return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
        }
      },
      /**
       * 是否需要开启全国
       */
      isAddAll: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      props: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    /*城市级联*/
    watch: {
      value(val) {
        if (this.isChange) {
          this.isChange = false
        } else {
          this.setDefaultCity()
          const panel = this.$refs.cascaderCity.$refs.panel
          panel.clearCheckedNodes() // 清空级联选择器选中状态
          panel.activePath = [] // 清除高亮
        }
      }
    },
    /*城市级联*/
    created() {
      this.setDefaultCity()
      this.init()
    },
    /*城市级联*/
    methods: {
      /*提交*/
      submitForm(formName) {
        /*this.NewStudentFile = false*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /*重置*/
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      /**
       * 初始化数据已选的数据
       */
      setDefaultCity() {
        // 判断是否有默认区域再判断是否开启多选
        const value = JSON.parse(JSON.stringify(this.value))
        let data = []
        if (value !== '' && typeof value === 'string') {
          if (this.props.multiple) {
            data = value.split(',').map(item => {
              return this.handleDefaultRegion(item)
            })
          } else {
            data = this.handleDefaultRegion(value)
          }
        }
        this.cityArr = data
      },
      /**
       * 字符串拆分出数组
       */
      handleDefaultRegion(value) {
        return value.split('/')
      },
      /**
       * 将数组拼接回字符串
       */
      handleRegionStr(value) {
        let str = ''
        value.forEach(item => {
          str += item + '/'
        })
        return str.slice(0, str.length - 1)
      },
      /**
       * 初始化省市区数据
       */
      init() {
        const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
        if (this.isAddAll) {
          cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
        }
        switch (this.optionType) {
          case 'regionData': // 省市区
            this.options = cityData
            break
          case 'provinceAndCityData': // 省市
            this.options = cityData.map(item => {
              if (item.children) {
                item.children.map(item1 => {
                  item1.children = null // 删除一个最后个区
                  return item1
                })
              }
              return item
            })
            break
          default:
            console.error('请选择正确的optionType！')
            break
        }
      },
      handleChange(event) {
        this.$emit('change', event)
        this.cityArr = event
        let str = ''
        if (this.props.multiple) { // 多选
          event.forEach(item => {
            str += this.handleRegionStr(item) + ','
          })
          str = str.slice(0, str.length - 1)
        } else {
          str = this.handleRegionStr(event)
        }
        this.isChange = true
        this.$emit('input', str)
        console.log('选中:', event)
      }
    }
  }
</script>

<style scoped>
  .selectFont{
    font-size: 15px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 0 250px;
  }
  .box_content2{
    flex: 30 0 200px;
  }
  .box_content3{
    flex: 30 0 400px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
